import React,{Component} from 'react'
import { List, Avatar, Icon } from 'antd';
import {connect} from 'react-redux'
import {getArticleData} from '../../store/actionCreator'
import myavatar from '../../static/images/avatar.jpg'
import {Link} from 'react-router-dom'
// import Android from '../../static/images/Android.png'
// import Bootstrap from '../../static/images/Bootstrap.png'
// import Css from '../../static/images/Css.png'
// import Html from '../../static/images/Html.png'
// import Java from '../../static/images/Java.png'
// import JQuery from '../../static/images/JQuery.png'
// import Js from '../../static/images/Js.png'
// import Mysql from '../../static/images/Mysql.png'
// import Nodejs from '../../static/images/Nodejs.png'
// import Qita from '../../static/images/Qita.png'
// import Reacts from '../../static/images/React.png'
// import Ui from '../../static/images/Ui.png'
// import Vue from '../../static/images/Vue.png'
class Article extends Component{
    constructor(){
        super();
        this.state={

        }
    }
    componentDidMount(){
      this.props.getArticleData('article');
      //console.log(this.props.ArticleList.toJS())
    }
    render(){
      //console.log(this.props.ArticleList.toJS());
      const listData = [];
      for (let i = 0; i < this.props.ArticleList.length; i++) {
        //console.log(this.props.ArticleList.toJS()[i].avatar)
        listData.push({
          href: '/myblog/article/detail/'+this.props.ArticleList[i].id,
          title: this.props.ArticleList[i].title,
          avatar: myavatar,
          description:
            '分类：'+this.props.ArticleList[i].category,
          content:
            this.props.ArticleList[i].sketch,
            cate:this.props.ArticleList[i].avatar,
            time:this.props.ArticleList[i].time,
        });
      }
        return(
            <React.Fragment>
                <List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: page => {
        console.log(page);
      },
      pageSize: 6,
    }}
    dataSource={listData}
    footer={
      <div>
        
      </div>
    }
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <p style={{marginBottom:0}}>{item.time}</p>
        ]}
        extra={
          <img
            width={150}
            alt="logo"
            src={require('../../static/images/'+item.cate+".png")} 
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={require('../../static/images/avatar.jpg')} />}
          title={<Link to={item.href} style={{textDecoration:'none'}}>{item.title}</Link>}
          description={item.description}
        />
        <div dangerouslySetInnerHTML={{__html:item.content}}></div>
      </List.Item>
    )}
  />
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=>{
  return{
    ArticleList:state.get('article').get('ArticleList').toJS()
  }
}
const mapDispatchToProps = (dispatch)=>{
  return{
      getArticleData(type){
        let action = getArticleData(type);
        dispatch(action); 
      }    
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Article);